<style lang="scss" scoped>
.rare-headers {
    width: 100%;
    .rare-header {
        width: 100%;
        height: 68px;
        line-height: 68px;
        background: #2B3245;
        img {
            margin: 6px 0;
            float: left;
        }
        .rotate-icon {
            .imgIcon{
                transform: rotate(-90deg);
            }
            
        }
        .imgIcon {
            margin-top: 23px;
            margin-right: 15px;
        }
        span {
            color: #6C7695;
            font-size: 18px;
        }
        .right {
            float: right;
            height: 100%;
            .right-menu {
                color: #ebeef5;
                margin-right: 22px;
                font-size: 20px;
                float: left;
                &.cursor {
                    cursor: pointer;
                }
            }
            .right-text {
                font-size: 14px;
                color: #ebeef5;
                float: left;
            }
        }
    }
}
</style>

<template>
    <div class="rare-headers">
        <div class="rare-header">
            <a style='height:68px;line-height:68px;float:left;' href="http://www.dchealth.com" target="_blank"><img src="/static/images/home/logo2.png" /></a>
            <a style='height:68px;line-height:68px;float:left;' @click="handleClick" :class="rotateIcon"><img src="/static/icon/iconLogo.png" alt="" class="imgIcon"></a>
            <span>{{currentSys}}</span>
            <div class="right">
                  <span class="right-menu cursor" @click="goCongenica">
                   <Icon type="upload" title="congenica上传"></Icon>
                </span>  
                <span class="right-menu">
                    <Icon type="android-person"></Icon>
                </span>
                <Poptip class="right-menu cursor" placement="bottom">
                    <span class="right-text">{{currentUser}}</span>
                    <div slot="title">
                        <a>账户信息</a>
                    </div>
                    <div slot="content">
                        <a>修改密码</a>
                    </div>
                </Poptip>
                <span title="选择系统" @click="goSelect" class="right-menu cursor">
                    <i class="el-icon-menu"></i>
                </span>
                <span title="退出" @click="goHome" class="right-menu cursor">
                    <Icon type="android-exit"></Icon>
                </span>
            </div>
        </div>
    </div>
</template>
<script>
import { setCookie, getCookie, delCookie } from '@/common/js/cookie.js';
export default {
    name: "rare-header",
    data() {
        return {
            isCollapse: false,
            currentUser: "",
            currentSys: "",
        }
    },
    computed: {
        rotateIcon() {
            return [
                this.isCollapse ? 'rotate-icon' : ''
            ];
        },
    },
    methods: {
        handleClick() {
            console.log(1111);
            this.isCollapse = !this.isCollapse;
            this.$emit("isLogFn", this.isCollapse)
        },
        goSelect() {
            this.$store.state.currentSys = '';
            this.$store.state.productId = '';
            this.$router.push("/main");
        },
        goCongenica(){
            this.$router.push("/congenica");
        },
        goHome() {
            this.$store.state.userid = '';
            this.$store.state.username = '';
            delCookie('userid');
            this.$router.push("/home");
        }
    },
    created() {
        this.$store.state.username = getCookie('username')
        this.currentUser = this.$store.state.username;
        if (this.$store.state.productId == 1) {
            this.$store.state.currentSys = "罕见病检测平台";
            this.currentSys = this.$store.state.currentSys;
        } else if (this.$store.state.productId == 2) {
            this.$store.state.currentSys = "遗传性肿瘤检测平台";
            this.currentSys = this.$store.state.currentSys;
        } else if (this.$store.state.productId == 3) {
            this.$store.state.currentSys = "肿瘤检测平台";
            this.currentSys = this.$store.state.currentSys;
        } else if (this.$store.state.productId == 4) {
            this.$store.state.currentSys = "家树系统";
            this.currentSys = this.$store.state.currentSys;
        } else if (this.$store.state.productId == 5) {
            this.$store.state.currentSys = "congenica上传";
            this.currentSys = this.$store.state.currentSys;
        }
        this.$store.state.token = getCookie("token");
    }
}
</script>
